<template>
  <div class="profile-page">
    <!-- 用户信息头部 -->
    <div class="user-header">
      <div class="avatar-container">
        <div class="avatar">
          <img
:src="userInfo.avatar" alt="头像" />
        </div>
        <button class="edit-avatar"
@click="editAvatar">
          <img
src="@/assets/camera-icon.png" alt="编辑" />
        </button>
      </div>
      <h2>{{ userInfo.name }}</h2>
      <p>{{ userInfo.role }}</p>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-section">
      <div class="menu-group">
        <h3>账户管理</h3>
        <div class="menu-list">
          <div class="menu-item"
@click="navigateTo('personal-info')">
            <div class="icon">
              <img
src="@/assets/user-icon.png" alt="个人信息" />
            </div>
            <div class="content">
              <span>个人信息</span>
            </div>
            <div class="arrow">
              <img
src="@/assets/arrow-right.png" alt=">" />
            </div>
          </div>
          <div class="menu-item"
@click="navigateTo('security')">
            <div class="icon">
              <img
src="@/assets/security-icon.png" alt="账户安全" />
            </div>
            <div class="content">
              <span>账户安全</span>
            </div>
            <div class="arrow">
              <img
src="@/assets/arrow-right.png" alt=">" />
            </div>
          </div>
          <div class="menu-item"
@click="navigateTo('wechat-bind')">
            <div class="icon">
              <img
src="@/assets/wechat-icon.png" alt="微信绑定" />
            </div>
            <div class="content">
              <span>微信绑定</span>
              <span class="status"
:class="{ bound: userInfo.wechatBound }">
                {{ userInfo.wechatBound ? '已绑定' : '未绑定' }}
              </span>
            </div>
            <div class="arrow">
              <img
src="@/assets/arrow-right.png" alt=">" />
            </div>
          </div>
        </div>
      </div>

      <div class="menu-group">
        <h3>系统设置</h3>
        <div class="menu-list">
          <div class="menu-item"
@click="navigateTo('notification')">
            <div class="icon">
              <img
src="@/assets/notification-icon.png" alt="消息通知" />
            </div>
            <div class="content">
              <span>消息通知</span>
            </div>
            <div class="arrow">
              <img
src="@/assets/arrow-right.png" alt=">" />
            </div>
          </div>
          <div class="menu-item"
@click="navigateTo('privacy')">
            <div class="icon">
              <img
src="@/assets/privacy-icon.png" alt="隐私设置" />
            </div>
            <div class="content">
              <span>隐私设置</span>
            </div>
            <div class="arrow">
              <img
src="@/assets/arrow-right.png" alt=">" />
            </div>
          </div>
          <div class="menu-item"
@click="toggleDarkMode">
            <div class="icon">
              <img
src="@/assets/theme-icon.png" alt="深色模式" />
            </div>
            <div class="content">
              <span>深色模式</span>
            </div>
            <div class="toggle">
              <label class="switch">
                <input
v-model="darkMode" type="checkbox" />
                <span class="slider" />
              </label>
            </div>
          </div>
        </div>
      </div>

      <div class="menu-group">
        <h3>其他</h3>
        <div class="menu-list">
          <div class="menu-item"
@click="navigateTo('about')">
            <div class="icon">
              <img
src="@/assets/about-icon.png" alt="关于我们" />
            </div>
            <div class="content">
              <span>关于我们</span>
            </div>
            <div class="arrow">
              <img
src="@/assets/arrow-right.png" alt=">" />
            </div>
          </div>
          <div class="menu-item"
@click="navigateTo('feedback')">
            <div class="icon">
              <img
src="@/assets/feedback-icon.png" alt="意见反馈" />
            </div>
            <div class="content">
              <span>意见反馈</span>
            </div>
            <div class="arrow">
              <img
src="@/assets/arrow-right.png" alt=">" />
            </div>
          </div>
          <div class="menu-item"
@click="navigateTo('help')">
            <div class="icon">
              <img
src="@/assets/help-icon.png" alt="帮助中心" />
            </div>
            <div class="content">
              <span>帮助中心</span>
            </div>
            <div class="arrow">
              <img
src="@/assets/arrow-right.png" alt=">" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 退出登录按钮 -->
    <button
class="logout-btn" @click="logout">退出登录</button>

    <!-- 版本信息 -->
    <div class="version-info">
      <p>当前版本: v1.0.0</p>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const userInfo = ref({
    name: '张三',
    role: '系统用户',
    avatar: '@/assets/user-avatar.png',
    wechatBound: true,
  })

  const darkMode = ref(false)

  const editAvatar = () => {
    console.log('编辑头像')
  }

  const navigateTo = route => {
    console.log('导航到:', route)
  }

  const toggleDarkMode = () => {
    darkMode.value = !darkMode.value
    console.log('切换深色模式:', darkMode.value)
  }

  const logout = () => {
    console.log('退出登录')
  }
</script>

<style scoped lang="scss">
  .profile-page {
    padding: 15px;

    .user-header {
      text-align: center;
      margin-bottom: 30px;

      .avatar-container {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 0 auto 15px;

        .avatar {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .edit-avatar {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 30px;
          height: 30px;
          background: #1989fa;
          border: 2px solid white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0;

          img {
            width: 16px;
            height: 16px;
          }
        }
      }

      h2 {
        margin: 0 0 5px 0;
        font-size: 18px;
      }

      p {
        margin: 0;
        color: #999;
        font-size: 14px;
      }
    }

    .menu-section {
      .menu-group {
        margin-bottom: 20px;

        h3 {
          font-size: 14px;
          color: #999;
          margin: 0 0 10px 0;
        }

        .menu-list {
          background: white;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

          .menu-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;

            &:last-child {
              border-bottom: none;
            }

            .icon {
              width: 24px;
              height: 24px;
              margin-right: 15px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .content {
              flex: 1;
              display: flex;
              justify-content: space-between;

              span {
                font-size: 15px;
              }

              .status {
                font-size: 12px;
                color: #999;

                &.bound {
                  color: #52c41a;
                }
              }
            }

            .arrow {
              margin-left: 10px;

              img {
                width: 16px;
                height: 16px;
              }
            }

            .toggle {
              .switch {
                position: relative;
                display: inline-block;
                width: 44px;
                height: 22px;

                input {
                  opacity: 0;
                  width: 0;
                  height: 0;

                  &:checked + .slider {
                    background-color: #1989fa;
                  }

                  &:checked + .slider:before {
                    transform: translateX(22px);
                  }
                }

                .slider {
                  position: absolute;
                  cursor: pointer;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background-color: #ccc;
                  transition: 0.4s;
                  border-radius: 22px;

                  &:before {
                    position: absolute;
                    content: '';
                    height: 18px;
                    width: 18px;
                    left: 2px;
                    bottom: 2px;
                    background-color: white;
                    transition: 0.4s;
                    border-radius: 50%;
                  }
                }
              }
            }
          }
        }
      }
    }

    .logout-btn {
      width: 100%;
      padding: 12px;
      background: #ff4d4f;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      margin-top: 20px;
    }

    .version-info {
      text-align: center;
      margin-top: 30px;

      p {
        color: #999;
        font-size: 12px;
      }
    }
  }
</style>
